import * as React from 'react';
import { Form, Input, Modal, Select, message, Row, Col } from 'antd';
import request from '@/http';
import { useState } from 'react';
const { Option } = Select;
import qs from 'qs';

interface ChangeGroupObject {
  isModalVisible: boolean;
  id?: number;
  groupName?: string;
}

//更换分组
const ChangeGroup = (props: {
  editObject: ChangeGroupObject;
  onClose: any;
}) => {
  const { editObject, onClose } = props;
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [formObject] = Form.useForm();

  const modelOnOk = async () => {
    const data = await formObject.validateFields();
    console.log(data);
    const result: any = await request.post(
      '/api/admin/group/UpdateStudentToTeam',
      qs.stringify({
        studentId: editObject.id,
        teamId: data.collegesName,
      }),
    );
    if (result.success) {
      message.success('修改成功');
      onClose();
      setIsModalVisible(false);
    } else {
      message.error('请重新选择分组');
    }
  };

  const modelOnCancel = () => {
    setIsModalVisible(false);
  };

  React.useEffect(() => {
    setIsModalVisible(editObject.isModalVisible);
    selectGroup();
    if (editObject.id !== null) {
      formObject.setFieldsValue({
        groupName: editObject.groupName,
      });
    }
  }, [editObject]);

  const [newGroup, setNewGroup] = useState([]);

  const selectGroup = async () => {
    const groupData: any = await request.post(
      '/api/common_module/a_t_s/getCourse',
    );
    const data = groupData.data.map((user: any) => ({
      key: `user_${user.courseId}`,
      teamId: user.courseId,
      teamName: user.courseName, //组名
    }));
    setNewGroup(data);
  };

  const formItemLayout = {
    labelCol: {
      span: 7,
    },
    wrapperCol: {
      span: 24,
    },
  };

  return (
    <>
      <Modal
        width={800}
        className="modal"
        title={'更换分组'}
        visible={isModalVisible}
        onCancel={modelOnCancel}
        onOk={modelOnOk}
        maskClosable={false}
        destroyOnClose
        okText="确认"
        cancelText="取消"
      >
        <Form
          className="form"
          name="editForm"
          form={formObject}
          preserve={false}
          {...formItemLayout}
        >
          <Row gutter={24} style={{ width: '100%', position: 'fixed' }}>
            <Col span={5}>
              <Form.Item
                label="请选择新分组"
                name="collegesName"
                initialValue=""
              >
                <Select style={{ width: '100%' }} placeholder="请选择">
                  {(newGroup || []).map((newGroup: any) => {
                    return (
                      <option key={newGroup.teamId} value={newGroup.teamId}>
                        {newGroup.teamName}
                      </option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </>
  );
};

export { ChangeGroup, ChangeGroupObject };
